<template>
  <view class="pk-box">
    <view class="pk-bj-a">
      <image :src="image_host+'bg_zhandui_a.png'"></image>
    </view>
    <view class="pk-bj-b">
      <image :src="image_host+'bg_zhandui_b.png'"></image>
    </view>
    <view class="pk-icon">
      <image :src="image_host+'img_pk.png'"></image>
    </view>
    <view class="pk-comment">
      <view class="pk-item">
        <view class="pk-title">{{ pkATitle }}</view>
        <view class="pk-button" v-if="pkIndex===''" @click.stop="setPkIndex(0)">站队</view>
        <view class="progress-bar" v-if="pkIndex!==''">
          <view class="progress-title">{{ Math.round(pkA / allCount * 100) }}% 支持
            <image v-if="pkIndex===0" :src="image_host+'duigou.png'"></image>
          </view>
          <view class="progress-box">
            <view :style="pkIndex!==''?'width:'+parseInt(pkA/allCount*100)+'%;':''"></view>
          </view>
        </view>
      </view>
      <view class="pk-item">
        <view class="pk-title">{{ pkBTitle }}</view>
        <view class="pk-button" v-if="pkIndex===''" @click.stop="setPkIndex(1)">站队</view>
        <view class="progress-bar" v-if="pkIndex!==''">
          <view class="progress-title">
            <image v-if="pkIndex===1" :src="image_host+'duigou.png'"></image>
            {{ Math.round(pkB / allCount * 100) }}% 支持
          </view>
          <view class="progress-box">
            <view :style="pkIndex!==''?'width:'+parseInt(pkB/allCount*100)+'%;':''"></view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: ['item'],
  data() {
    return {
      image_host: this.image_host + 'quanzi/',
      pkIndex: '',
      allCount: 0,
      pkA: 0,
      pkB: 0,
      pkATitle: "",
      pkBTitle: ""
    };
  },
  created() {
    if (this.item.contentType !== 2) {
      return
    }
    this.pkATitle = this.item.voteList[0].optionContent
    this.pkBTitle = this.item.voteList[1].optionContent
    this.pkA = this.item.voteList[0].rate
    this.pkB = this.item.voteList[1].rate
    this.allCount = this.pkA + this.pkB
    if (this.item.hasPkEnd === 1) {
      this.pkIndex = 100
    }
    this.item.voteList.forEach((item, index) => {
      if (item.selected === 1) {
        this.pkIndex = index
      }
    })
  },
  methods: {

    async setPkIndex(index) {
      if (this.pkIndex !== '') {
        return
      }
      let data = {
        optionId: this.item.voteList[index].optionId,
        topicId: this.item.id
      }
      let res = await this.$javaCircle.doRequest('post', 'circle/customer/vote/takeVote', data, 'json')
      if (res.data.code !== 0) {
        uni.showToast({title: res.data.message, icon: "none"})
        return
      }
      this.pkIndex = index;
      if (index === 0) {
        this.pkA++;
      } else {
        this.pkB++;
      }
      this.$nextTick(() => {
        this.allCount = this.pkA + this.pkB
        this.$emit('chageInfo', this.pkIndex)
      })
    },
    setIndex(index) {
      if (this.pkIndex >= 0) {
        return
      }
      this.pkIndex = index;
      if (index === 0) this.pkA++;
      else this.pkB++;
      this.$nextTick(() => {
        this.allCount = this.pkA + this.pkB
      })
    }
  },
}
</script>

<style lang="scss">
.pk-box {
  width: 100%;
  height: 168upx;
  position: relative;

  .pk-bj-a, .pk-bj-b {
    width: 372upx;
    height: 100%;
    position: absolute;
    top: 0;
  }

  .pk-bj-a {
    left: 0;
  }

  .pk-bj-b {
    right: 0;
  }

  .pk-icon {
    width: 104upx;
    height: 104upx;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
  }

  .pk-comment {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 12upx 24upx;

    .pk-item {
      width: 50%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .pk-title {
        font-size: 46upx;
        color: #000;
        font-weight: 700;
      }

      .pk-button {
        width: 190upx;
        height: 66upx;
        font-size: 42upx;
        font-weight: 500;
        background-color: #fff;
        text-align: center;
        line-height: 66upx;
        border-radius: 33upx;
      }
    }

    .pk-item:nth-child(1) {
      .pk-title, .progress-bar {
        margin-right: auto;
      }

      .pk-button {
        margin-right: auto;
        color: #F7C43A;
      }

      .progress-title {
        color: #FFF9E5;
      }

      .progress-box {
        view {
          border: 2upx solid #F7C43A;
        }
      }
    }

    .pk-item:nth-child(2) {
      .pk-title, .progress-bar {
        margin-left: auto;
      }

      color: #52B776;

      .pk-button {
        margin-left: auto;
      }

      .progress-title {
        color: #D0F9DF;
        text-align: end;
      }

      .progress-box {
        view {
          border: 2upx solid #3ABA64;
          margin-left: auto;
        }
      }
    }

    .progress-bar {

      .progress-title {
        font-size: 28upx;
        line-height: 40upx;
        display: flex;
        align-items: center;

        image {
          width: 30upx;
          height: 30upx;
          margin-right: 10upx;
        }
      }

      .progress-box {
        width: 220upx;
        height: 14upx;
        border-radius: 33upx;
        background-color: rgba(255, 255, 255, 0.6);
        display: flex;

        view {
          height: 100%;
          border-radius: 33upx;
          width: 0;
          transition: all .3s linear;
          background-color: #fff;
        }
      }
    }

  }


  image {
    width: 100%;
    height: 100%;
  }
}
</style>
